<template>
      <div>
            <div id="map"></div>
      </div>
</template>
<script>
import 'ol/ol.css';
import Map from 'ol/Map';
import View from 'ol/View';
import GeoJSON from 'ol/format/GeoJSON';
import VectorLayer from 'ol/layer/Vector';
import VectorSource from 'ol/source/Vector';
import {Fill, Stroke, Style, Text} from 'ol/style';
export default {
    name:'OlMapWms',
    mounted() {   
          var vectorLayer = new VectorLayer({
            source: new VectorSource({
                  url: 'http://localhost:8080/geoserver/covidmap/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=covidmap%3Achina&outputFormat=application%2Fjson',
                  format: new GeoJSON()
            })
            });
            var map = new Map({
                  layers: [vectorLayer],
                  target: 'map',
                  view: new View({
                        center: [0, 0],
                        zoom: 3
                  })
             });
    }
}
</script>
<style lang="stylus" scoped>
#map
      width:900px
      height:350px
</style>